<template>
  <div class="rightMenu">
    <!-- <a href="javascript:;"
      v-if="$store.state.app.scatter && $store.state.app.scatter.identity"
      @click="$router.push('/my-wallet')"
      class="iconfont logoicon icon-qianbao item"
      :title="$t('public.wallet')"></a>
    <a href="javascript:;" class="iconfont logoicon icon-kefu item"
      :title="$t('supNav.customerService')"></a>
    <el-popover
      placement="left"
      width="200"
      trigger="hover">
      <div class="bg">
        <img src="../../assets/img/wx-lianfei.png" width="100%">
        <p style="text-align:center">{{$t('supNav.msg')}}</p>
      </div>
      <a slot="reference" href="javascript:;" class="iconfont logoicon icon-erweima item"
        :title="$t('supNav.qRCode')"></a>
    </el-popover>
    <a href="javascript:;" class="iconfont logoicon el-icon-arrow-up item"
      :title="$t('supNav.toTop')"
      v-if="scrollTop" @click="toTop"></a> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: null, // 当前页面滚动位置
      showErweima: false, // 是否显示二维码
      scrollTimer: null, // 滚动定时器
    };
  },
  components: {
  },
  created() {
    this.scrollTop = document.documentElement.scrollTop; // 页面初始化完成赋值
    document.addEventListener('scroll', this.scrollChange);
  },
  methods: {
    scrollChange() {
      this.scrollTop = document.documentElement.scrollTop;
    },
    erweimaHover() { // hover时,二维码显示
      this.showErweima = true;
    },
    erweimaOut() { // 离开时,二维码隐藏
      this.showErweima = false;
    },
    toTop() {
      this.scrollTop = 0;
      this.scrollTimer = setInterval(() => {
        document.documentElement.scrollTop -= 100;
        if (document.documentElement.scrollTop <= 0) {
          document.documentElement.scrollTop = 0;
          clearInterval(this.scrollTimer);
        }
      }, 16)
    }
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.scrollChange);
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.rightMenu{
  z-index: 999;
  position: fixed;
  right: 0px;
  top: 50%;
  background: transparent;
  transform: translate(0px,-50%);

  .item{
    display: block;
    font-size: 50px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0px 0px 5px #ddd;
    border-bottom: 3px solid transparent;

    &:last-child{
      border: 0px;
    }

    &.item:hover,
    &.item-active{
      background: linear-gradient(to right top, #2c7fff , #24b0ff);
      color: rgba(255, 255, 255, .8);
    }
  }
}
.theme-1B1D27{
  .rightMenu{
    color: rgba(255, 255, 255, .8);

    .item{
      background: $-black1;
      box-shadow: 0px 0px 15px rgba(255, 255, 255, .2) inset;
      border-bottom: 3px solid $-black2;
    }
  }
}
</style>
